---
id: link
category: navigation
title: Link
package: '@chakra-ui/layout'
description: Link is an accessible element for navigation.
---

## Imports

```js
import { Link } from '@chakra-ui/react'
import { ExternalLinkIcon } from '@chakra-ui/icons'
```

## Usage

```jsx
<Link>Chakra UI</Link>
```

### External Link

```jsx
<Link href='https://chakra-ui.com' isExternal>
  Chakra Design system <ExternalLinkIcon mx='2px' />
</Link>
```

### Link inline with text

```jsx
<Text>
  Did you know that{' '}
  <Link color='teal.500' href='#'>
    links can live inline with text
  </Link>
</Text>
```

## Usage with Routing Library

To use the `Link` with a routing library like Reach Router or React Router, all
you need to do is pass the `as` prop. It'll replace the rendered `a` tag with
Reach's `Link`.

```jsx live=false
// 1. import { Link as ReachLink } from "@reach/router"

// 2. Then use it like this
<Link as={ReachLink} to='/home'>
  Home
</Link>
```

## Usage with Next.js

To use the `Link` with Next.js, all you need to do is to wrap `Link` with
Next.js `Link` component and pass the `passHref` prop. `passHref` Forces Next.js
`Link` to send the `href` property to its child.

```jsx live=false
// 1. import NextLink from "next/link"

// 2. Then use it like this
<NextLink href='/home' passHref>
  <Link>Home</Link>
</NextLink>
```
